<template>
  <div class="key-project-detail">
    <el-card class="box-card" style="margin-bottom: 10px" shadow="never">
      <div slot="header" class="box-card-header">
        <span style="display: flex;align-items: center;">
          <img style="width: 26px;height: 22px; margin:0 5px" :src="topImg" alt="img" />
          <span style="font-size: 22px; font-weight: bold">{{ projectName }}</span>
        </span>
        <el-button size="mini" type="primary" @click="goBack" style="width: 80px;">返回</el-button>
      </div>
      <div>
        <div v-if="curFlow.length === 0">无流程</div>
        <div v-else class="flow-box">
          <flowNodeTemp
            v-for="(item, index) in curFlow"
            :key="item.processSchedule"
            :color="item.color"
            :title="item.processSchedule"
            :showLine="index < curFlow.length - 1"
            :blocking="item.blocking"
            :bgColor="item.bgColor"
            :startTime="item.startTime"
            :endTime="item.endTime"
            :currentPoint="item.status === '遇到堵点'"
            :currentPointData="item.tProjectFlowStopList"
          >
          </flowNodeTemp>
          <div class="project-day">
            <div class="div1">项目用时</div>
            <div>{{ projectDay }}</div>
          </div>
        </div>
      </div>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="18">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="box-card-header">
            <span>项目信息</span>
            <span>
              <el-button size="mini" type="primary" icon="el-icon-download" @click="downProject"
                >项目下载</el-button
              >
              <el-button size="mini" type="warning" icon="el-icon-edit-outline" @click="editProject"
                >项目编辑</el-button
              >
              <el-button size="mini" type="danger" icon="el-icon-edit-outline" @click="disProject"
                >项目调度</el-button
              >
            </span>
          </div>
          <div class="form-box" :style="{ height: `${formBoxHeight}px` }">
            <div class="grid-title">基本信息</div>
            <el-form
              :model="formInfo"
              ref="formInfo"
              label-position="top"
              size="mini"
              disabled
            >
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="项目名称：" prop="projectName">
                    <el-input
                      v-model="formInfo.projectName"
                      placeholder="项目名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="包联领导：" prop="projectLeader">
                    <el-input
                      v-model="formInfo.projectLeader"
                      placeholder="包联领导"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="牵头部门：" prop="leadingDepartment">
                    <el-input
                      v-model="formInfo.leadingDepartment"
                      placeholder="牵头部门"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="投资主体：" prop="investmentEntity">
                    <el-input
                      v-model="formInfo.investmentEntity"
                      placeholder="投资主体"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="总投资：" prop="totalMoney">
                    <el-input
                      v-model="formInfo.totalMoney"
                      placeholder="总投资"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="占地面积：" prop="floorSpace">
                    <el-input
                      v-model="formInfo.floorSpace"
                      placeholder="占地面积"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="项目介绍：" prop="projectIntroduce">
                    <el-input
                      v-model="formInfo.projectIntroduce"
                      placeholder="项目介绍"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="建设地址：" prop="constructionAddress">
                    <el-input
                      v-model="formInfo.constructionAddress"
                      placeholder="建设地址"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="政策诉求：" prop="policyStatement">
                    <el-input
                      v-model="formInfo.policyStatement"
                      placeholder="政策诉求"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="投资承诺：" prop="investmentCommitment">
                    <el-input
                      v-model="formInfo.investmentCommitment"
                      placeholder="投资承诺"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="项目进展：" prop="projectProgress">
                    <el-input
                      v-model="formInfo.projectProgress"
                      type="textarea"
                      :rows="2"
                      placeholder="项目进展"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="grid-title">项目阶段</div>
              <el-row :gutter="20">
                <!-- 洽谈 -->
                <el-col :span="8">
                  <el-form-item label="洽谈阶段开始时间：" prop="startTime">
                    <el-date-picker
                      v-model="formInfo.tProjectFlows[0].startTime"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="洽谈阶段结束时间：" prop="endTime">
                    <el-date-picker
                      v-model="formInfo.tProjectFlows[0].endTime"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否存在堵点：">
                    <el-select v-model="formInfo.isPoint1" placeholder="请选择">
                      <el-option label="是" value="yes"></el-option>
                      <el-option label="否" value="no"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <div
                  v-if="
                    formInfo.tProjectFlows[0].tProjectFlowStopList &&
                    formInfo.tProjectFlows[0].tProjectFlowStopList.length > 0
                  "
                  class="point-box"
                >
                  <el-button
                    size="small"
                    style="margin-top: 10px"
                    type="primary"
                    >新增堵点</el-button
                  >
                  <el-row
                    v-for="(item, index) in formInfo.tProjectFlows[0]
                      .tProjectFlowStopList"
                    :key="`row${index}`"
                    class="point-box-item"
                    :gutter="20"
                  >
                    <el-col :span="24">
                      <el-form-item prop="content">
                        <div slot="label" class="form-point-label">
                          <span>{{ `赌点${index + 1}` }}</span>
                          <span class="delete-point"
                            ><i class="el-icon-delete"></i>删除</span
                          >
                        </div>
                        <el-input
                          v-model="item.content"
                          placeholder="赌点"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="推进要求：" prop="requirements">
                        <el-input
                          v-model="item.requirements"
                          placeholder="推进要求"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="责任部门：" prop="department">
                        <el-input
                          v-model="item.department"
                          placeholder="责任部门"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="完成时限：" prop="successTime">
                        <el-date-picker
                          type="date"
                          v-model="item.successTime"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <!-- 洽谈end -->
                <!-- 签约 -->
                <el-col :span="8">
                  <el-form-item label="签约阶段开始时间：" prop="startTime">
                    <el-date-picker
                      v-model="formInfo.tProjectFlows[1].startTime"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="签约阶段结束时间：" prop="endTime">
                    <el-date-picker
                      v-model="formInfo.tProjectFlows[1].endTime"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否存在堵点：" prop="isPoint2">
                    <el-select v-model="formInfo.isPoint2" placeholder="请选择">
                      <el-option label="是" value="yes"></el-option>
                      <el-option label="否" value="no"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <div
                  v-if="
                    formInfo.tProjectFlows[1].tProjectFlowStopList &&
                    formInfo.tProjectFlows[1].tProjectFlowStopList.length > 0
                  "
                  class="point-box"
                >
                  <el-button
                    size="small"
                    style="margin-top: 10px"
                    type="primary"
                    >新增堵点</el-button
                  >
                  <el-row
                    v-for="(item, index) in formInfo.tProjectFlows[1]
                      .tProjectFlowStopList"
                    :key="`row${index}`"
                    class="point-box-item"
                    :gutter="20"
                  >
                    <el-col :span="24">
                      <el-form-item prop="content">
                        <div slot="label" class="form-point-label">
                          <span>{{ `赌点${index + 1}` }}</span>
                          <span class="delete-point"
                            ><i class="el-icon-delete"></i>删除</span
                          >
                        </div>
                        <el-input
                          v-model="item.content"
                          placeholder="赌点"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="推进要求：" prop="requirements">
                        <el-input
                          v-model="item.requirements"
                          placeholder="推进要求"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="责任部门：" prop="department">
                        <el-input
                          v-model="item.department"
                          placeholder="责任部门"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="完成时限：" prop="successTime">
                        <el-date-picker
                          type="date"
                          v-model="item.successTime"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <!-- 签约end -->
                <!-- 土地手续 -->
                <el-col :span="8">
                  <el-form-item label="土地手续阶段开始时间：" prop="startTime">
                    <el-date-picker
                      v-model="formInfo.tProjectFlows[2].startTime"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="土地手续阶段结束时间：" prop="endTime">
                    <el-date-picker
                      v-model="formInfo.tProjectFlows[2].endTime"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否存在堵点：" prop="isPoint3">
                    <el-select v-model="formInfo.isPoint3" placeholder="请选择">
                      <el-option label="是" value="yes"></el-option>
                      <el-option label="否" value="no"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <div
                  v-if="
                    formInfo.tProjectFlows[2].tProjectFlowStopList &&
                    formInfo.tProjectFlows[2].tProjectFlowStopList.length > 0
                  "
                  class="point-box"
                >
                  <el-button
                    size="small"
                    style="margin-top: 10px"
                    type="primary"
                    >新增堵点</el-button
                  >
                  <el-row
                    v-for="(item, index) in formInfo.tProjectFlows[2]
                      .tProjectFlowStopList"
                    :key="`row${index}`"
                    class="point-box-item"
                    :gutter="20"
                  >
                    <el-col :span="24">
                      <el-form-item prop="content">
                        <div slot="label" class="form-point-label">
                          <span>{{ `赌点${index + 1}` }}</span>
                          <span class="delete-point"
                            ><i class="el-icon-delete"></i>删除</span
                          >
                        </div>
                        <el-input
                          v-model="item.content"
                          placeholder="赌点"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="推进要求：" prop="requirements">
                        <el-input
                          v-model="item.requirements"
                          placeholder="推进要求"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="责任部门：" prop="department">
                        <el-input
                          v-model="item.department"
                          placeholder="责任部门"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="完成时限：" prop="successTime">
                        <el-date-picker
                          type="date"
                          v-model="item.successTime"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <!-- 土地手续end -->
                <!-- 立项审批 -->
                <el-col :span="8">
                  <el-form-item label="立项审批阶段开始时间：" prop="startTime">
                    <el-date-picker
                      v-model="formInfo.tProjectFlows[3].startTime"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="立项审批阶段结束时间：" prop="endTime">
                    <el-date-picker
                      v-model="formInfo.tProjectFlows[3].endTime"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否存在堵点：" prop="isPoint4">
                    <el-select v-model="formInfo.isPoint4" placeholder="请选择">
                      <el-option label="是" value="yes"></el-option>
                      <el-option label="否" value="no"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <div
                  v-if="
                    formInfo.tProjectFlows[3].tProjectFlowStopList &&
                    formInfo.tProjectFlows[3].tProjectFlowStopList.length > 0
                  "
                  class="point-box"
                >
                  <el-button
                    size="small"
                    style="margin-top: 10px"
                    type="primary"
                    >新增堵点</el-button
                  >
                  <el-row
                    v-for="(item, index) in formInfo.tProjectFlows[3]
                      .tProjectFlowStopList"
                    :key="`row${index}`"
                    class="point-box-item"
                    :gutter="20"
                  >
                    <el-col :span="24">
                      <el-form-item prop="content">
                        <div slot="label" class="form-point-label">
                          <span>{{ `赌点${index + 1}` }}</span>
                          <span class="delete-point"
                            ><i class="el-icon-delete"></i>删除</span
                          >
                        </div>
                        <el-input
                          v-model="item.content"
                          placeholder="赌点"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="推进要求：" prop="requirements">
                        <el-input
                          v-model="item.requirements"
                          placeholder="推进要求"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="责任部门：" prop="department">
                        <el-input
                          v-model="item.department"
                          placeholder="责任部门"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="完成时限：" prop="successTime">
                        <el-date-picker
                          type="date"
                          v-model="item.successTime"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <!-- 立项审批end -->
                <!-- 其他事项 -->
                <el-col :span="8">
                  <el-form-item label="其他事项阶段开始时间：" prop="startTime">
                    <el-date-picker
                      v-model="formInfo.tProjectFlows[4].startTime"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="其他事项阶段结束时间：" prop="endTime">
                    <el-date-picker
                      v-model="formInfo.tProjectFlows[4].endTime"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否存在堵点：" prop="isPoint5">
                    <el-select v-model="formInfo.isPoint5" placeholder="请选择">
                      <el-option label="是" value="yes"></el-option>
                      <el-option label="否" value="no"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <div
                  v-if="
                    formInfo.tProjectFlows[4].tProjectFlowStopList &&
                    formInfo.tProjectFlows[4].tProjectFlowStopList.length > 0
                  "
                  class="point-box"
                >
                  <el-button
                    size="small"
                    style="margin-top: 10px"
                    type="primary"
                    >新增堵点</el-button
                  >
                  <el-row
                    v-for="(item, index) in formInfo.tProjectFlows[4]
                      .tProjectFlowStopList"
                    :key="`row${index}`"
                    class="point-box-item"
                    :gutter="20"
                  >
                    <el-col :span="24">
                      <el-form-item prop="content">
                        <div slot="label" class="form-point-label">
                          <span>{{ `赌点${index + 1}` }}</span>
                          <span class="delete-point"
                            ><i class="el-icon-delete"></i>删除</span
                          >
                        </div>
                        <el-input
                          v-model="item.content"
                          placeholder="赌点"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="推进要求：" prop="requirements">
                        <el-input
                          v-model="item.requirements"
                          placeholder="推进要求"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="责任部门：" prop="department">
                        <el-input
                          v-model="item.department"
                          placeholder="责任部门"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="完成时限：" prop="successTime">
                        <el-date-picker
                          type="date"
                          v-model="item.successTime"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <!-- 其他事项end -->
                <!-- 开工 -->
                <el-col :span="8">
                  <el-form-item label="开工阶段开始时间：" prop="startTime">
                    <el-date-picker
                      v-model="formInfo.tProjectFlows[5].startTime"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开工阶段结束时间：" prop="endTime">
                    <el-date-picker
                      v-model="formInfo.tProjectFlows[5].endTime"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否存在堵点：" prop="isPoint6">
                    <el-select v-model="formInfo.isPoint6" placeholder="请选择">
                      <el-option label="是" value="yes"></el-option>
                      <el-option label="否" value="no"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <div
                  v-if="
                    formInfo.tProjectFlows[5].tProjectFlowStopList &&
                    formInfo.tProjectFlows[5].tProjectFlowStopList.length > 0
                  "
                  class="point-box"
                >
                  <el-button
                    size="small"
                    style="margin-top: 10px"
                    type="primary"
                    >新增堵点</el-button
                  >
                  <el-row
                    v-for="(item, index) in formInfo.tProjectFlows[5]
                      .tProjectFlowStopList"
                    :key="`row${index}`"
                    class="point-box-item"
                    :gutter="20"
                  >
                    <el-col :span="24">
                      <el-form-item prop="content">
                        <div slot="label" class="form-point-label">
                          <span>{{ `赌点${index + 1}` }}</span>
                          <span class="delete-point"
                            ><i class="el-icon-delete"></i>删除</span
                          >
                        </div>
                        <el-input
                          v-model="item.content"
                          placeholder="赌点"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="推进要求：" prop="requirements">
                        <el-input
                          v-model="item.requirements"
                          placeholder="推进要求"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="责任部门：" prop="department">
                        <el-input
                          v-model="item.department"
                          placeholder="责任部门"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="完成时限：" prop="successTime">
                        <el-date-picker
                          type="date"
                          v-model="item.successTime"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <!-- 开工end -->
              </el-row>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="work-card" shadow="never">
          <div slot="header">
            <span>工作动态</span>
          </div>
          <div
            :style="{
              height: `${formBoxHeight}px`,
              overflowY: 'auto',
              padding: '10px',
            }"
          >
            <div
              v-for="(item, index) in workData"
              :key="index"
              class="item"
              :style="{
                borderBottom:
                  index !== workData.length - 1 && '1px solid #E5E5E5',
              }"
            >
              <div class="work-item-top">
                <span><i class="el-icon-date"></i> {{ item.date }}</span>
                <span><i class="el-icon-s-custom"></i> {{ item.uname }}</span>
              </div>
              <div><i class="el-icon-s-order"></i> {{ item.text }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import topImg from "@img/project/icon-xmgl4.png";
import { detailKeyProject, keyProjectWork } from "@/api/projectManaApi";
import flowNodeTemp from "./flowNodeTemp.vue";
const flows = [
  {
    processSchedule: "洽谈",
    startTime: "",
    endTime: "",
    tProjectFlowStopList: [],
    color: "#B8B8B8",
    bgColor: "#F5F5F5",
    blocking: true,
  },
  {
    processSchedule: "签约",
    startTime: "",
    endTime: "",
    tProjectFlowStopList: [],
    color: "#B8B8B8",
    bgColor: "#F5F5F5",
    blocking: true,
  },
  {
    processSchedule: "土地手续",
    startTime: "",
    endTime: "",
    tProjectFlowStopList: [],
    color: "#B8B8B8",
    bgColor: "#F5F5F5",
    blocking: true,
  },
  {
    processSchedule: "立项审批",
    startTime: "",
    endTime: "",
    tProjectFlowStopList: [],
    color: "#B8B8B8",
    bgColor: "#F5F5F5",
    blocking: true,
  },
  {
    processSchedule: "其他事项",
    startTime: "",
    endTime: "",
    tProjectFlowStopList: [],
    color: "#B8B8B8",
    bgColor: "#F5F5F5",
    blocking: true,
  },
  {
    processSchedule: "开工",
    startTime: "",
    endTime: "",
    tProjectFlowStopList: [],
    color: "#B8B8B8",
    bgColor: "#F5F5F5",
    blocking: true,
  },
];
export default {
  name: "keyProjectDetail",
  props: ["curId"],
  components: { flowNodeTemp },
  data() {
    return {
      topImg: topImg,
      formInfo: {
        projectName: "",
        projectLeader: "",
        leadingDepartment: "",
        investmentEntity: "",
        totalMoney: "",
        floorSpace: "",
        projectIntroduce: "",
        constructionAddress: "",
        policyStatement: "",
        investmentCommitment: "",
        projectProgress: "",
        isPoint1: "",
        isPoint2: "",
        isPoint3: "",
        isPoint4: "",
        isPoint5: "",
        isPoint6: "",
        tProjectFlows: flows,
      },
      formBoxHeight: document.body.clientHeight - 430,
      projectName: "",
      projectDay: "--",
      workData: [],
      curFlow: [],
    };
  },
  created() {
    if (this.curId) {
      this.initData(this.curId);
    }
  },
  mounted() {
    window.addEventListener(
      "resize",
      () => {
        this.formBoxHeight = document.body.clientHeight - 430;
      },
      false
    );
  },
  methods: {
    // 返回
    goBack(type) {
      this.$emit("onDetailBack", type);
    },
    // 获取详情
    async initData(id) {
      const res = await detailKeyProject(id);
      const res2 = await keyProjectWork({ id: id });
      if (res.id) {
        this.projectName = res.projectName;
        this.projectDay = res.projectDay || "--";
        this.formInfo = { ...this.formInfo, ...res };
        if (!this.formInfo.tProjectFlows) {
          this.formInfo.tProjectFlows = flows;
        }
        this.curFlow = this.formInfo.tProjectFlows.map((item, index) => {
          if (item.processSchedule === flows[index].processSchedule) {
            if (item.status === "遇到堵点") {
              item.color = "#FF0000";
              item.bgColor = "#FFEEEE";
              item.blocking = true;
            }
            if (item.status === "顺利推进") {
              item.color = "#0DC807";
              item.bgColor = "#EBF9EF";
            }
            if (item.status === "已完成") {
              item.color = "#4D82FF";
              item.bgColor = "#F2F5FE";
            }
            if (item.status === "未开始") {
              item.color = "#B8B8B8";
              item.bgColor = "#F5F5F5";
              item.blocking = true;
            }
          }
          return item;
        });
      } else {
        this.$message.error("请求错误");
      }
      if (res2.code === 200) {
        this.workData = res2.rows;
      }
    },
    // 项目下载
    downProject() {},
    // 项目编辑
    editProject() {
      this.$emit("onProjectEdit", this.curId);
    },
    // 项目调度
    disProject() {},
  },
};
</script>
<style scoped lang="less">
.key-project-detail {
  border-radius: 0 0 8px 8px;

  .top {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #e5e5e5;
    .left {
      font-weight: bold;
      font-size: 16px;
    }
  }
  /deep/.el-card__header {
    padding: 0 10px;
    background: #e5e5e5;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}
.form-box {
  padding: 15px;
  overflow-y: auto;
  .grid-title {
    font-weight: bold;
  }
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
  /deep/.el-form--label-top .el-form-item__label {
    padding: 0;
    width: 100%;
  }
}

.point-box {
  padding: 0 15px 10px 15px;
  box-sizing: border-box;
  border: 1px solid #eee;
  background: #f9f9f9;
  margin: 10px;
  overflow: hidden;
  .point-box-item {
    float: none;
  }

  .form-point-label {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .delete-point:hover {
    cursor: pointer;
    color: red;
  }
}

.box-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.work-item-top {
  display: flex;
  justify-content: space-between;
  color: #a2aab3;
  height: 32px;
  align-items: center;
}
.work-card,
.box-card {
  /deep/.el-card__body {
    padding: 0;
  }
}
.flow-box {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.project-day {
  width: 80px;
  text-align: center;
  .div1 {
    font-weight: bold;
  }
}
</style>
